<!DOCTYPE HTML>

<html>

	<head>
  
		<style>
			#canvas-wrap { position:relative } /* Make this a positioned parent */
			#container   { position:absolute; top:20px; left:30px; }
		</style>
		
		<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.8.js"></script>
		<script>
		
			function writeMessage(messageLayer, message) {
			
				var context = messageLayer.getContext();
				messageLayer.clear();
				context.font = "18pt Calibri";
				context.fillStyle = "black";
				context.fillText(message, 10, 25);
				
			}

			window.onload = function() {
			
				var firstCircle;
				var lastCircle;
				
				var firstState = false;

				var stage = new Kinetic.Stage({
					container: "container",
					width: 600,
					height: 600
				});
				var shapesLayer = new Kinetic.Layer();
				var messageLayer = new Kinetic.Layer();
				
				var line1 = new Kinetic.Line({
				
					points: [50, 50, 200, 50],
					stroke: "black",
					strokeWidth: 15,
					lineCap: "round",
					lineJoin: "round"
					
				});
				
				var line2 = new Kinetic.Line({
				
					points: [50, 50, 200, 50],
					stroke: "black",
					strokeWidth: 15,
					lineCap: "round",
					lineJoin: "round"
					
				});
				
				var line3 = new Kinetic.Line({
				
					points: [50, 50, 200, 50],
					stroke: "black",
					strokeWidth: 15,
					lineCap: "round",
					lineJoin: "round"
					
				});
				
				var line4 = new Kinetic.Line({
				
					points: [50, 50, 200, 50],
					stroke: "black",
					strokeWidth: 15,
					lineCap: "round",
					lineJoin: "round"
					
				});
				
				var circle1 = new Kinetic.Circle({
				
					x: 150,
					y: 150,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle1.on("mouseover", function() {
				
					if (true === firstState) {
					
						lastCircle = circle1;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line1.setPoints(pointArray);
						
						shapesLayer.add(line1);

						stage.add(shapesLayer);
						stage.add(messageLayer);
						
						firstCircle = circle1;
						
					}
				
					writeMessage(messageLayer, "Mouseover circle1");
					
				});
				circle1.on("mouseout", function() {
				
					writeMessage(messageLayer, "Mouseout circle1");
					
				});
				circle1.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle1;
						firstState = true;
										
					}
					
					else {
					
						lastCircle = circle1;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
									  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line1.setPoints(pointArray);
						
						shapesLayer.add(line1);

						stage.add(shapesLayer);
						stage.add(messageLayer);
					
					}
					
					writeMessage(messageLayer, "Mousedown circle1");
					
				});
				circle1.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle1");
				});
				
				shapesLayer.add(circle1);
				
				var circle2 = new Kinetic.Circle({
				
					x: 300,
					y: 150,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle2.on("mouseover", function() {
				
					if (true === firstState) {
					
						lastCircle = circle2;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line2.setPoints(pointArray);
						
						shapesLayer.add(line2);

						stage.add(shapesLayer);
						stage.add(messageLayer);
						
						firstCircle = circle2;
						
					}
				
					writeMessage(messageLayer, "Mouseover circle2");
					
				});
				circle2.on("mouseout", function() {
				
					writeMessage(messageLayer, "Mouseout circle2");
					
				});
				circle2.on("mousedown", function() {
				
					if( false === firstState ){
					
						firstCircle = circle2;
						firstState = true;
					
					}	
					
					writeMessage(messageLayer, "Mousedown circle2");
					
				});
				circle2.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle2");
				});
				
				shapesLayer.add(circle2);
				
				var circle3 = new Kinetic.Circle({
				
					x: 150,
					y: 300,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle3.on("mouseover", function() {
				
					if (true === firstState) {
					
						lastCircle = circle3;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line3.setPoints(pointArray);
						
						shapesLayer.add(line3);

						stage.add(shapesLayer);
						stage.add(messageLayer);
						
						firstCircle = circle3;
						
					}
				
					writeMessage(messageLayer, "Mouseover circle3");
					
				});
				circle3.on("mouseout", function() {
				
					lastCircle = firstCircle;
				
					writeMessage(messageLayer, "Mouseout circle3");
					
				});
				circle3.on("mousedown", function() {
				
					if( false === firstState ){
					
						firstCircle = circle3;
						firstState = true;

					}
				
					writeMessage(messageLayer, "Mousedown circle3");
					
				});
				circle3.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle3");
				});
				
				shapesLayer.add(circle3);
				
				var circle4 = new Kinetic.Circle({
				
					x: 300,
					y: 300,
					radius: 20,
					fill: "black",
					stroke: "black",
					strokeWidth: 5
				
				});
				
				circle4.on("mouseover", function() {
				
					if (true === firstState) {
					
						lastCircle = circle4;
						
						var pointArray = [firstCircle.getAbsolutePosition().x, firstCircle.getAbsolutePosition().y,
										  lastCircle.getAbsolutePosition().x, lastCircle.getAbsolutePosition().y];
						
						line4.setPoints(pointArray);
						
						shapesLayer.add(line4);

						stage.add(shapesLayer);
						stage.add(messageLayer);
						
						firstCircle = circle4;
						
					}
				
					writeMessage(messageLayer, "Mouseover circle4");
					
				});
				circle4.on("mouseout", function() {
				
					writeMessage(messageLayer, "Mouseout circle4");
					
				});
				circle4.on("mousedown", function() {
					
					if( false === firstState ){
					
						firstCircle = circle4;
						firstState = true;
	
					}
					
					writeMessage(messageLayer, "Mousedown circle4");
					
				});
				circle4.on("mouseup", function() {
					writeMessage(messageLayer, "Mouseup circle4");
				});
				
				shapesLayer.add(circle4);

				stage.add(shapesLayer);
				stage.add(messageLayer);

			};

		</script>
	
	</head>
  
	<body>
		<div id="container"></div>
	</body>
  
</html>
